<template>
	<view>
		<view class="midContent">
			<uni-card title="班级信息" extra="">
				<view>班级名称：{{className}}</view>
				<view>班主任：{{userName}}</view>
				<view>任课老师（教员）：{{courseInstructorName}}</view>
				<view>班级部门：{{dept}}</view>
				<view>创建时间：{{createTime}}</view>
				<view>修改时间：{{modifyTime}}</view>
				<view>班级考勤规则</view>
				<view>
					<view v-for="item in attendList" :key="item.value">{{item.text}}</view>
				</view>
			</uni-card>
		</view>
		<button class="button" type="primary" @click="toggle('center')">修改考勤信息</button>
	
		<uni-popup ref="popup" background-color="#fff">
			<view style="width: 600rpx; height: 50vh; padding: 30rpx;">
				<uni-forms style="margin-top: 40rpx;" :modelValue="formData" label-width="150" label-position="top">
					<uni-forms-item name="courseInstructor" label="班级考勤规则">
						<uni-data-checkbox multiple :localdata="oldAttendList" v-model="attendRulesList"
							@change="checkRules"></uni-data-checkbox>
						<button type="primary" style="margin-top: 20rpx;" @click="submit">提交</button>
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import teachClass from "@/api/modules/teachClass.js"
	export default {
		data() {
			return {
				classId: "",
				userName: '',
				topName: '班级详情',
				type: "",
				className: "",
				courseInstructorList: [],
				attendList: [],
				oldAttendList: [],
				classAttendanceRules: "",
				courseInstructorName: "",
				dept: "",
				createTime: "",
				modifyTime: "",
				formData: {
					attendRules: [],
				},
				attendRulesList: [],
			}
		},
		methods: {
			// 重置表单
			restForm() {
				this.classAttendanceRules = ""
				this.formData.attendRules = []
				this.attendRulesList = []
			},
			// 关闭弹框
			close() {
				this.$refs.popup.close()
			},
			// 打开弹框
			toggle(type) {
				this.type = type
				this.$refs.popup.open(type)
				this.formData.attendRules = this.classAttendanceRules.split(",")
				this.formData.attendRules.forEach(item => {
					const check = Number(item)
					this.attendRulesList.push(check)
				})
				console.log(this.attendRulesList)
			},
			// 获取任课老师信息列表
			getAllCourseInstructorList() {
				teachClass.getAllCourseInstructorList().then(res => {
					res.data.forEach(item => {
						let obj = {}
						obj.value = item.id
						obj.text = item.username
						this.courseInstructorList.push(obj)
					})
				})
			},
			// 获取所属部门
			getDictByType() {
				teachClass.getDictByType("class_dept").then(res => {
					this.departList = res.data
				})
			},
			// 获取班级管理信息
			getClassInfo() {
				teachClass.getClassInfo(this.classId).then(res => {
					this.attendList = []
					if (!res.data.rulesList) {
						this.className = res.data.className
						this.courseInstructorName = res.data.courseInstructorName
						this.createTime = res.data.createTime
						this.modifyTime = res.data.modifyTime
						this.dept = res.data.dept
						return
					}
					res.data.rulesList.forEach(item => {
						this.className = res.data.className
						this.courseInstructorName = res.data.courseInstructorName
						this.createTime = res.data.createTime
						this.modifyTime = res.data.modifyTime
						this.dept = res.data.dept
						this.classAttendanceRules = res.data.classAttendanceRules
						let obj = {}
						obj.value = item.id
						obj.text = item.timeSlotLabel + "(" + item.attendanceStartTime + "~" + item
							.attendanceEndTime + ")"
						this.attendList.push(obj)
					})
				})
			},
			// 获取班级考勤规则
			findAllAttendanceRules() {
				teachClass.findAllAttendanceRules().then(res => {
					res.data.forEach(item => {
						let obj = {}
						obj.value = item.id
						obj.text = item.timeSlotLabel + "(" + item.attendanceStartTime + "~" + item
							.attendanceEndTime + ")"
						this.oldAttendList.push(obj)
					})
				})
			},
			checkRules(e) {
				this.classAttendanceRules = e.detail.value.join(",")
				console.log(this.classAttendanceRules)
			},
			// 提交修改
			submit() {
				let obj = {}
				obj.id = this.classId
				obj.classAttendanceRules = this.classAttendanceRules
				if (obj.classAttendanceRules == "") {
					uni.showToast({
						title: "请填写考勤规则",
						icon: "none",
					})
					return
				}
				console.log(obj.classAttendanceRules)
				teachClass.UpdateClassInfo(obj).then(res => {
					this.$refs.popup.close()
					this.restForm()
					this.getClassInfo()
				})
			}
		},
		onLoad(options) {
			this.userName = uni.getStorageSync("userName")
			this.classId = options.classId
			this.getClassInfo()
			this.getAllCourseInstructorList()
			this.getDictByType()
			this.findAllAttendanceRules()
		},

	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexContent {
		height: 100vh;
	}

	.form {
		padding: 20rpx;
	}

	.midContent {
		margin-top: 40rpx;
	}

	.popup-content {
		/* @include flex; */
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.popup-height {
		/* @include height; */
		width: 200px;
	}
</style>